<script setup lang='ts'>
import { Props } from "./props"
const emit = defineEmits<{
  (e: "handleSizeChange", data: any): void;
  (e: "handleCurrentChange", data: any): void;
  (e: "onSelectionChange", data: any): void;
}>();

withDefaults(defineProps<Props>(), {
  data: () => [],
  columns: () => [],
  border: true,
  rowKey: "_id",
  pagination: {
  // @ts-ignore
    pageNo: 1,
    pageSize: 10,
    total: 0,
    pageSizes: [10, 20, 30, 40],
    size: false,
    disabled: false,
    background: false,
  },
  showHeader: true,
  showOverflowTooltip: true
});

const handleCurrentChange = (data: any) => {
  emit("handleCurrentChange", data)
}
const handleSizeChange = (data: any) => {
  emit("handleSizeChange", data)
}

</script>

<template>
  <div>
    <div 
      v-if="columns.length > 0"
    >
      <el-table
          :data="data"
          :row-key="rowKey"
          style="width: 100%"
          :border="border ?? true"
          :tree-props="{ children: 'children' }"
          empty-text="暂无数据"
          :default-expand-all="true"
          >
          <el-table-column
            v-for="item in columns"
            v-bind="item"
            :key="item.label"
            :prop="item.prop"
            :label="item.label"
          >
            <template v-if="item.slot" #default="{row}">
              <slot :name="item.slot" :row="row" />
            </template>
          </el-table-column>
        </el-table>
      <el-pagination
        class="mt-4"
        v-model:current-page="pagination.pageNo"
        v-model:page-size="pagination.pageSize"
        :page-sizes="pagination.pageSizes"
        :size="pagination.size ?? false"
        :disabled="pagination.disabled ?? false"
        :background="pagination.background ?? true"
        layout="->, prev, pager, next, jumper ,sizes,total"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  <el-empty v-else description="暂无数据" />
  </div>
</template>

<style scoped lang="scss">

</style>